<template>
  <div class="DesignFilesDetail" v-if="detail">
    <!-- <div class="DesignFilesDetail-top">
      <el-popover
        placement="bottom"
        width="900"
        trigger="click"
        :offset="410"
        style="margin-right: 10px"
      >
        <div style="display: flex">
          <div class="fun">
            <div class="fun-title">基础操作</div>
            <div class="fun-fun" style="margin-top: 20px">
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                新增
              </div>
              <div
                class="pointer"
                @click="onClick(2)"
                :style="{ color: isClick == 2 ? '#bbb' : '' }"
              >
                <i class="el-icon-document-add"></i>
                编辑
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                复制
              </div>
              <div class="pointer" @click="clickOms(detail)">
                <i class="el-icon-document-add"></i>
                推送
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                保存
              </div>
              <div class="pointer" @click="onClick('')">
                <i class="el-icon-document-add"></i>
                取消
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                停用
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                启用
              </div>
            </div>
          </div>
          <div class="fun" style="margin-left: 40px">
            <div class="fun-title">生成/导出/打印</div>
            <div class="fun-fun">
              <el-dropdown size="small" split-button type="primary">
                生成
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>版单</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown size="small" split-button type="primary">
                导出
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>版单</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown size="small" split-button type="primary">
                打印
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>版单</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>

        <el-button slot="reference" size="mini">编辑导出</el-button>
      </el-popover>
      <el-popover placement="bottom" width="1000" trigger="click" :offset="460">
        <div style="display: flex">
          <div class="fun">
            <div class="fun-title">流程确认</div>
            <div class="fun-fun" style="margin-top: 20px">
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                设计确认
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                设计撤销
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                技术确认
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                生成确认
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                生产撤销
              </div>
            </div>
          </div>
          <div class="fun" style="margin-left: 40px">
            <div class="fun-title">资料确认</div>
            <div class="fun-fun" style="margin-top: 20px">
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                尺码表确认
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                尺码表撤销
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                工艺单确认
              </div>
              <div class="pointer">
                <i class="el-icon-document-add"></i>
                工艺单撤销
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" size="mini">资料确认</el-button>
      </el-popover>
    </div> -->
    <div class="DesignFilesDetail-title">
      <div class="DesignFilesDetail-title-left">
        <el-image :src="detail.img" fit="contain" :preview-src-list="detail.img">
          <div slot="error" class="image-slot">
            <div>暂无图片</div>
          </div>
        </el-image>
      </div>
      <div class="DesignFilesDetail-title-right">
        <div class="DesignFilesDetail-title-right-top">
          <div>款号：{{ detail.number || "暂无" }}<el-button size="mini" type="primary" class="CopyTest" style="margin-left:10px" @click="onCopy('.CopyTest')"
                                                        :data-clipboard-text="detail.number">复制</el-button>
          </div>
          <div>创建人：{{ detail.creator || "暂无" }}</div>
          <div>创建时间：{{ detail.creation_time || "暂无" }}</div>
          <div>
            <span :style="statecolor(detail.state)">{{detail.state | statetext }}</span>
          </div>
          <div class="editlook">{{isClick == 2 ? '编辑中' : '查看中'}}</div>
        </div>
        <div class="DesignFilesDetail-title-right-content">
          <div>
            <div>款名：</div>
            <el-input v-model="detail.name" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>简称：</div>
            <el-input v-model="detail.jy_name" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>品类：</div>
            <el-input v-model="detail.product_category" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>设计分类：</div>
            <el-input v-model="detail.detail_category" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>设计类型：</div>
            <el-input value="自主研发" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>计划上新年份：</div>
            <el-input v-model="detail.year" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>计划上新月份：</div>
            <el-input v-model="detail.month" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>实际上新时间：</div>
            <el-input v-model="detail.sj_date" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>品牌：</div>
            <el-input v-model="detail.brand" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>季节：</div>
            <el-input v-model="detail.season" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>目标群体：</div>
            <el-input v-model="detail.target" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>文化属性：</div>
            <el-input v-model="detail.t1" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>套装编码：</div>
            <el-input v-model="detail.package_number" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>工艺类型：</div>
            <el-input placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>绣花总针数：</div>
            <el-input v-model="detail.embroidery_stitches_number" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>
              <img style="width: 18px" src="../../assets/images/head.png" alt=""/>图稿设计师：
            </div>
            <el-input v-model="detail.f3" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>
              <img style="width: 18px" src="../../assets/images/head.png" alt=""/>产品负责人：
            </div>
            <el-input v-model="detail.designer" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>
              <img style="width: 18px" src="../../assets/images/head.png" alt=""/>绣花版师：
            </div>
            <el-input v-model="detail.embroider_designer" placeholder="暂无" size="mini" readonly></el-input>
          </div>
          <div>
            <div>
              <img style="width: 18px" src="../../assets/images/head.png" alt=""/>版师：
            </div>
            <el-input v-model="detail.paper_designer" placeholder="暂无" size="mini" readonly></el-input>
          </div>
        </div>
      </div>
    </div>
    <!-- <div>
      <el-button type="primary" size="default" @click="dialogVisibleSize = true"
        >尺码详情</el-button
      >
      <el-button type="primary" size="default" @click="dialogVisible = true"
        >工艺单详情</el-button
      >
    </div> -->
    <div class="DesignFilesDetail-bottom" :style="{ height: 'calc(100vh - ' + height + 'px' + ')' }">
      <div class="DesignFilesDetail-bottom-line pointer" @click="clickHeight" draggable @dragover.prevent @drag="drag($event)" @dragend="dragEnterOver($event)">
        <i class="el-icon-caret-top"></i>
        <div></div>
      </div>
      <div class="DesignFilesDetail-bottom-tabs">
        <el-tabs type="card" v-model="editableTabsValue" @tab-click="handleClick">
          <el-tab-pane label="物料清单" name="1">
            <div v-if="tabName == 1" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <MaterialList :MaterialList="MaterialList" :tabHeight="tabHeight" :Colour="Colour"></MaterialList>
            </div>
          </el-tab-pane>
          <el-tab-pane label="颜色" name="2">
            <div v-if="tabName == 2" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="Colour" border
                        stripe size="mini" style="margin-left: 10px">
                <el-table-column prop="colour_number" label="编码" width="200" align="center">
                  <template slot-scope="{ row }">
                    {{ row.colour_number }}
                  </template>
                </el-table-column>
                <el-table-column prop="colour" label="名称" width="200" align="center">
                </el-table-column>
                <el-table-column prop="colour_value" label="颜色展示" width="200" align="center">
                  <template slot-scope="{ row }">
                    <div :style="{background: '#' + Number(row.colour_value).toString(16),}" style="width: 100%; height: 20px"></div>
                  </template>
                </el-table-column>
                <el-table-column label="" align="center"> </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="尺码" name="3">
            <div v-if="tabName == 3" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="detail.code_list" border stripe size="mini" style="margin-left: 10px">
                <el-table-column prop="size_code" label="尺码名称" width="200" align="center">
                  <template slot-scope="{ row }">
                    {{ row.size_code.title }}
                  </template>
                </el-table-column>
                <el-table-column prop="height_code" label="身高/腰围" width="200" align="center">
                  <template slot-scope="{ row }">
                    {{ row.height_code.title }}/{{ row.waist_code.title }}
                  </template>
                </el-table-column>
                <el-table-column label="" align="center"> </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="尺寸表" name="4">
            <div v-if="tabName == 4" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <sizeedit :type_no="detail.number" :detail="detail" v-if="isClick == 2"></sizeedit>
              <sizePDF :type_no="detail.number" v-else></sizePDF>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="价格" name="5">价格</el-tab-pane> -->
          <el-tab-pane label="大货BOM" name="6">
            <div v-if="tabName == 6" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <BomlList :Colour="Colour" :number="detail.number" :BomlList="BomlList" :tabHeight="tabHeight"></BomlList>
            </div>
          </el-tab-pane>
          <el-tab-pane label="绣花BOM" name="7">
            <div v-if="tabName == 7" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <BomlListXH :Colour="Colour" :number="detail.number" :BomlList="EmbroideBom" :tabHeight="tabHeight"></BomlListXH>
            </div>
          </el-tab-pane>
          <el-tab-pane label="印花BOM" name="8">
            <BomYH></BomYH>
          </el-tab-pane>
          <el-tab-pane label="样衣工时" name="9">
            <Yyhs :yyhsList="yyhsList" v-if="tabName == 9"></Yyhs>
          </el-tab-pane>
          <el-tab-pane label="新品预排" name="10">
            <Xpyp :xpypList="xpypList" v-if="tabName == 10"></Xpyp>
          </el-tab-pane>
          <!-- <el-tab-pane label="注意事项" name="11">注意事项</el-tab-pane> -->
          <!-- <el-tab-pane label="工艺事项" name="12">工艺事项</el-tab-pane> -->
          <el-tab-pane label="工艺单" name="13">
            <div v-if="tabName == 13" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <processedit :type_no="detail.number" :process_sheet_status="detail.process_sheet_status" v-if="isClick == 2"></processedit>
              <processPDF :process_sheet_status="detail.process_sheet_status" :type_no="detail.number" v-else></processPDF>
            </div>
          </el-tab-pane>
          <el-tab-pane label="封样报告" name="14">
            <div v-if="tabName == 14" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <Fybg :detail="detail" :isClick="isClick" ref="fybg"></Fybg>
            </div>
          </el-tab-pane>
          <el-tab-pane label="水洗方式" name="15">
            <el-table v-if="tabName == 15" :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="sxTable" border stripe size="mini" style="margin-left: 10px">
              <el-table-column label="款号" prop="type_no" width="100">
              </el-table-column>
              <el-table-column label="SKU" prop="sku_code" width="150">
              </el-table-column>
              <el-table-column label="面料" prop="fabric" width="400">
                <template slot-scope="{ row }">
                  <div v-if="row.lining_one">{{ row.lining_one }}</div>
                  <div v-if="row.lining_two">{{ row.lining_two }}</div>
                  <div v-if="row.lining_three">{{ row.lining_three }}</div>
                  <div v-if="row.lining_four">{{ row.lining_four }}</div>
                  <div v-if="row.lining_five">{{ row.lining_five }}</div>
                </template>
              </el-table-column>
              <el-table-column label="版面" prop="ban" align="center" width="100">
              </el-table-column>
              <el-table-column label="" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="执行标准" name="16">
            <div v-if="tabName == 16" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <el-table :data="tableData" size="mini" border stripe style="margin-left: 10px" :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
                <el-table-column prop="sku_code" label="SKU" width="200" align="center">
                </el-table-column>
                <el-table-column prop="safety_category" label="安全类别" width="200" align="center">
                </el-table-column>
                <el-table-column prop="executive_standard" label="执行标准" width="200" align="center">
                </el-table-column
                ><el-table-column label="" align="center"> </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="SKU" name="17">
            <div v-if="tabName == 17" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <el-table :data="StyleSku" size="mini" border stripe style="margin-left: 10px" :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
                <el-table-column prop="colour" label="颜色" width="100">
                </el-table-column>
                <el-table-column prop="size" label="尺码" width="100">
                </el-table-column>
                <el-table-column prop="sku" label="SKU编码" width="300">
                </el-table-column
                ><el-table-column label="" align="center"> </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="SKC" name="18">
            <div v-if="tabName == 18" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <el-table :data="StyleSkc" size="mini" border stripe style="margin-left: 10px" :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
                <el-table-column prop="colour" label="颜色" width="100">
                </el-table-column>
                <el-table-column prop="sku" label="SKC编码" width="300">
                </el-table-column
                ><el-table-column label="" align="center"> </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="相关资料" name="19">
            <div v-if="tabName == 19" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <technologydataEdit :row="detail" :isClick="isClick"></technologydataEdit>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片库" name="20">
            <div v-if="tabName == 20" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <imagesAll :id="detail.id" :jy_img="jy_img"></imagesAll>
            </div>
          </el-tab-pane>
          <el-tab-pane label="下单记录" name="22">
            <div v-if="tabName == 22" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <XDJL :type_no="detail.number"></XDJL>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日志" name="21">
            <div v-if="tabName == 21" class="myscroll" :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }">
              <LogList :id="detail.id"></LogList>
            </div>
          </el-tab-pane>
          <el-tab-pane label="附件" name="23">
            <el-table v-if="tabName == 23" :data="annexList" size="mini" border stripe style="margin-left: 10px;" :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
              <el-table-column prop="url" label="下载" width="100">
                <template slot-scope="scope">
                  <i class="el-icon-download" @click="downloadBtn(scope.row.url, scope.row.name)"  style="cursor: pointer"></i>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" width="300">
                <template slot-scope="scope">
                  <div>
                    <span>{{scope.row.name}}</span>
                    <a :href="scope.row.url" style="float: right" target="_blank"><i class="el-icon-view"></i></a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="类型" width="100"></el-table-column>
              <el-table-column label=""></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { floatSub, floatAdd, floatMultiply } from "@/utils/algorithm.js";
import CryptoJS from "crypto-js";
import {
    postAdminOperategetTypeDetail,
    postAdminOmsaddProduct,
    postAdminCodeGetTag,
    postAdminOperateGetStyleColour,
    postAdminOperateGetEmbroideBom,
    postAdminOperateGetStyleSku,
    postAdminOperateGetStyleSkc,
    postAdminOperateGetMaterialList,
    postAdminOperateGetAnnexList,
    postAdminCommonDownloadFile,
    postAdminOperateGetBomlList,
    postAdminCodeGetFabricMaintain,
    postAdminOperateGetSample_garment,
    postAdminOperategetnew_products_arrangement
} from "@/api";
import processPDF from "./components/processPDF.vue";
import sizePDF from "./components/sizePDF.vue";
import technologydataEdit from "./components/technologydataEdit.vue";
import sizeedit from "./components/sizeedit.vue";
import processedit from "./components/processedit.vue";
import MaterialList from "./components/MaterialList.vue";
import BomlList from "./components/BomlList.vue";
import BomlListXH from "./components/BomlListXH.vue";
import LogList from "./components/LogList.vue";
import Fybg from "./components/Fybg.vue";
import BomYH from "./components/BomYH.vue";
import XDJL from "./components/XDJL.vue";
import imagesAll from "./components/imagesAll.vue";
import Yyhs from "./components/Yyhs.vue";
import Xpyp from "./components/Xpyp.vue";

import {downLoadImg } from "@/utils/tools";

export default {
    components: {
        processPDF,
        sizePDF,
        technologydataEdit,
        imagesAll,
        sizeedit,
        processedit,
        MaterialList,
        BomlList,
        BomlListXH,
        LogList,
        Fybg,
        BomYH,
        XDJL,
        Yyhs,
        Xpyp
    },
    filters: {
        statetext(e) {
            if (e == 0) return "未确认";
            if (e == 1) return "设计确认";
            if (e == 2) return "技术确认";
            if (e == 3) return "生产确认";
        },
        timestampToTime(e) {
            return timestampToTime(e);
        },
    },
    data() {
        return {
            editableTabsValue: "1",
            dialogVisible: false,
            dialogVisibleSize: false,
            height: 340,
            heightTop: 420,
            top: 0,
            tabName: 1,
            isClick: "",
            type_no: "",
            detail: "",
            tableData: [],
            Colour: [],
            EmbroideBom: [],
            StyleSku: [],
            StyleSkc: [],
            MaterialList: [],
            BomlList: [],
            sxTable: [],
            jy_img: [],
            yyhsList:[],
            xpypList:[],
            annexList: [], //附件列表
            windowHeight: document.documentElement.clientHeight,
            tabHeight: 0,
        };
    },
    watch: {
        windowHeight(val) {
            let that = this;
            that.windowHeight = val;
            let { heightTop, windowHeight } = this;
            this.tabHeight = windowHeight - heightTop;
        },
        heightTop(val) {
            let that = this;
            let { heightTop, windowHeight } = this;
            this.tabHeight = windowHeight - heightTop;
        },
    },
    mounted() {},
    async activated() {
            let number = await this.$route.params.number;
            this.type_no = await this.decrypt(number);
            if (this.$route.params.isClick) {
              this.isClick = this.$route.params.isClick;
            }
            await this.postAdminOperategetTypeDetail();
            if (this.tabName == 1) {
              let { heightTop, windowHeight } = this;
              console.log(windowHeight);
              this.tabHeight = windowHeight - heightTop;
              this.postAdminOperateGetMaterialList();
              this.postAdminOperateGetStyleColour();
            } else {
              let obj = {
                name: this.tabName,
              };
              this.handleClick(obj);
            }
            if (this.tabName == 14) {
              this.$refs.fybg.postAdminOperateget_sealed_sample_report_list();
            }
        },
    methods: {
        // 样衣耗时
        async postAdminOperateGetSample_garment(){
          let { detail } = this
          let obj = {
            id:detail.id
          }
          let res = await postAdminOperateGetSample_garment(obj)
          this.yyhsList = res.data
        },
        // 新品预排
        async postAdminOperategetnew_products_arrangement(){
          let { detail } = this
          let obj = {
            id:detail.id
          }
          let res = await postAdminOperategetnew_products_arrangement(obj)
          this.xpypList = [res.data]
        },
        statecolor(e) {
          if (e == 0)
            return {
              color: "#999999",
              border: "1px solid #999999",
              borderRadius: "4px",
              fontSize: "12px",
              padding: "3px 10px",
            };
          if (e == 1)
            return {
              color: "#2C70D6",
              border: "1px solid #2C70D6",
              borderRadius: "4px",
              fontSize: "12px",
              padding: "3px 10px",
            };
          if (e == 2)
            return {
              color: "#67C23A",
              border: "1px solid #67C23A",
              borderRadius: "4px",
              fontSize: "12px",
              padding: "3px 10px",
            };
          if (e == 3)
            return {
              color: "#752CD6",
              border: "1px solid #752CD6",
              borderRadius: "4px",
              fontSize: "12px",
              padding: "3px 10px",
            };
        },
        // 水洗方式
        async postAdminCodeGetFabricMaintain() {
          let { detail } = this;
          let obj = {
            type_no: detail.number,
            page: 1,
            size: 10000,
          };
          let res = await postAdminCodeGetFabricMaintain(obj);
          this.sxTable = res.data;
        },

        // tab事件
        async handleClick(tab, event) {
          await this.postAdminOperategetTypeDetail();
          let { heightTop, windowHeight } = this;
          this.tabHeight = windowHeight - heightTop;
          if (tab.name == 1) {
            await this.postAdminOperateGetMaterialList();
            await this.postAdminOperateGetStyleColour();
          }
          if (tab.name == 2) {
            await this.postAdminOperateGetStyleColour();
          }
          if (tab.name == 6) {
            await this.postAdminOperateGetBomlList();
            await this.postAdminOperateGetStyleColour();
          }
          if (tab.name == 7) {
            await this.postAdminOperateGetEmbroideBom();
          }
          if (tab.name == 9) {
            await this.postAdminOperateGetSample_garment();
          }
          if (tab.name == 10) {
            await this.postAdminOperategetnew_products_arrangement();
          }
          if (tab.name == 15) {
            await this.postAdminCodeGetFabricMaintain();
          }
          if (tab.name == 16) {
            await this.postAdminCodeGetTag();
          }
          if (tab.name == 17) {
            await this.postAdminOperateGetStyleSku();
          }
          if (tab.name == 18) {
            await this.postAdminOperateGetStyleSkc();
          }
          if (tab.name == 23) {
            await this.postAdminOperateGetAnnexList();
          }
          this.tabName = tab.name;
        },
        // 颜色
        async postAdminOperateGetStyleColour() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };

          let res = await postAdminOperateGetStyleColour(obj);
          this.Colour = res.data;
        },
        // 绣花BOM
        async postAdminOperateGetEmbroideBom() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };
          let res = await postAdminOperateGetEmbroideBom(obj);
          let data = res.data;
          let datas = data.filter((e) => {
            e.zsjf = (e.f54 * e.f52).toFixed(2);
            e.sjxhj = (e.f54 * e.f52 + Number(e.f55)).toFixed(2);
            return e;
          });
          console.log("datas", datas);
          this.EmbroideBom = datas;
        },
        // SKU
        async postAdminOperateGetStyleSku() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };

          let res = await postAdminOperateGetStyleSku(obj);
          this.StyleSku = res.data;
        },
        // skc
        async postAdminOperateGetStyleSkc() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };
          let res = await postAdminOperateGetStyleSkc(obj);
          this.StyleSkc = res.data;
        },
        //物料清单
        async postAdminOperateGetMaterialList() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };
          let res = await postAdminOperateGetMaterialList(obj);
          this.MaterialList = res.data;
        },
        //大货bom
        async postAdminOperateGetBomlList() {
          let id = this.detail.id;
          console.log(id);
          let obj = {
            id,
          };
          let res = await postAdminOperateGetBomlList(obj);
          this.BomlList = res.data;
        },
        //附件
        postAdminOperateGetAnnexList() {
            let param = {number: this.detail.number};
            postAdminOperateGetAnnexList(param).then((res) =>{
                if(res.code === 0){
                  this.annexList = res.data;
                }
            });
        },
        //附件下载
        async downloadBtn(url, name){
            let res = downLoadImg(url, name);
            console.log(res)
        },

        clickHeight(e) {
          let { height } = this;
          if (height > 340) {
            let y = e.clientY - 340;
            this.height = 340;
            this.heightTop = 340 + 70;
          }
          if (height <= 340) {
            let y = e.clientY - 340;
            this.height = 150;
            this.heightTop = 150 + 70;
          }
          if (height <= 150) {
            let y = e.clientY - 340;
            this.height = 340;
            this.heightTop = 340 + 70;
          }
        },
        // 点击事件
        onClick(e) {
          this.isClick = e;
        },
        // 解密
        decrypt(word) {
          const key = CryptoJS.enc.Utf8.parse("SHISANYUABCDEF16"); //十六位十六进制数作为密钥
          const iv = CryptoJS.enc.Utf8.parse("61FEDCBASHISANYU"); //十六位十六进制数作为密钥偏移量
          let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
          let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
          let decrypt = CryptoJS.AES.decrypt(srcs, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
          });
          let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
          return decryptedStr.toString();
        },
        async clickOms(e) {
          let obj = {
            type_no: e.number,
            action_type: "add",
          };
          // if(e.is_oms==1){
          //     obj.action_type = "update"
          // }else{
          //     obj.action_type = "add"
          // }
          try {
            let res = await postAdminOmsaddProduct(obj);
            this.$message.success("推送成功");
          } catch (error) {}
        },
        async postAdminOperategetTypeDetail() {
          let obj = {
            number: this.type_no,
          };
          let res = await postAdminOperategetTypeDetail(obj);
          if (res.data.jy_img) {
            this.jy_img = [res.data.jy_img];
          }
          this.detail = res.data;
        },
        drag(e) {
          this.top = e.clientY;
        },
        async postAdminCodeGetTag() {
          let type_no = this.type_no;
          let obj = {
            type_no,
            page: 1,
            size: 10000,
          };
          let res = await postAdminCodeGetTag(obj);

          let tableData = res.data.filter((item) => {
            return item.safety_category || item.executive_standard;
          });
          this.tableData = tableData;
        },
        dragEnterOver(e) {
          this.height = e.clientY;
          this.heightTop = e.clientY + 70;
        },
  },
};
</script>

<style lang="scss" scoped>
page {
  font-size: 14px;
}
.editlook{
  color:#2c70d6;
  font-size: 12px;
  border:1px solid rgba($color: #2c70d6, $alpha: .3);;
  background: rgba($color: #2c70d6, $alpha: .1);
  border-radius: 3px;
  width: 60px;
  height: 26px;
  line-height: 24px;
  text-align: center;
}
.myscroll {
  overflow-y: scroll;
  overflow-x: hidden;
}
.myscroll::-webkit-scrollbar {
  display: none;
} // 隐藏滚动条
.fun {
  .fun-title {
    font-weight: 800;
    margin-bottom: 10px;
  }
  .fun-fun {
    display: flex;
    > div {
      margin-right: 20px;
    }
  }
}
.DesignFilesDetail {
  /deep/ .el-main {
    padding: 0 20px !important;
  }
  .DesignFilesDetail-top {
    padding: 5px 20px;
    border-bottom: 1px solid #f0f1f7;
    background: #fff;
  }
  .DesignFilesDetail-title {
    display: flex;
    background: #fff;
    // border-radius: 8px;
    padding: 20px;
    // margin-top: 10px;
    .DesignFilesDetail-title-left {
      width: 140px;
      height: 200px;
      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      > .el-image {
        width: 140px;
        height: 200px;
      }
    }
    .DesignFilesDetail-title-right {
      min-width: 1500px;
      width: 100%;
      .DesignFilesDetail-title-right-top {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        align-items: content;
        > div {
          margin-right: 50px;
        }
        > div:nth-child(1) {
          //   font-size: 18px;
          font-weight: 800;
        }
      }
      .DesignFilesDetail-title-right-content {
        display: flex;
        flex-wrap: wrap;
        width: 1500px;
        > div {
          display: flex;
          align-items: center;
          margin-top: 15px;
          margin-right: 20px;
          > div:nth-child(1) {
            width: 120px;
            text-align: right;
            font-weight: 600;
            font-size: 14px;
            color: #2c70d6;
            display: flex;
            align-items: center;
            justify-content: right;
            > img {
              margin-right: 4px;
            }
          }
          > div:nth-child(2) {
            width: 160px;
          }
        }
      }
    }
  }
  .DesignFilesDetail-bottom {
    // width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;

    .DesignFilesDetail-bottom-tabs {
      /deep/.el-tabs__item.is-active {
        color: #fff;
        background: #2c70d6;
      }
      border-top: 1px solid #f0f1f7;
      //   border-radius: 8px;
      //   padding: 20px;
      width: calc(100vw - 62px);
      background: #fff;
      height: calc(100% - 16px);
    }
    .DesignFilesDetail-bottom-line {
      cursor: row-resize;
      height: 8px;
      background: #dddddd;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 10px;
      > div {
        background: #000;
        height: 2px;
        width: 30px;
        border-radius: 4px;
      }
    }
  }
}
</style>